<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <title>作者的空间</title>
  <link rel="stylesheet" href="./css/xyueong.css">
</head>

<body>
<!--按钮表和按钮里-->
<input type="checkbox" id="menu_btn">
<label class="menu-btn" for="menu_btn">
  <i class="fa fa-bars" aria-hidden="true"></i>
</label>
<!--点击三道杠后出现的-->
<div class="wrapper">
  <ul class="menu">
    <li><a href="index.html">首页</a></li>
    <li><a href="messageBoard.html">留言板</a></li>
    <li><a href="videoHall.html">放映厅</a></li>
    <li><a href="login.html">登录</a></li>
    <li><a href="#">空</a></li>
  </ul>
</div>
<h2>向下滚动</h2>
<div class="bg">
  <span>Hi!</span>
</div>
<h1>欢迎来到<br>作者:薛勇的空间!</h1>
<script type="text/javascript">
  // 获取背景对象
  const bg=document.querySelector(".bg");
  // 监听滚轮事件
  document.addEventListener("scroll",function(){
    // 获取当前滚轮的位置
    const scrollY=window.scrollY;
    if(scrollY!=0){
      // 滚轮位置不等于0时,修改背景的定位加上滚轮的值
      bg.style.backgroundPosition="calc(50% + "+scrollY+"px) calc(50% + "+scrollY+"px)";
    }else{
      // 否则清空背景的定位
      bg.style.backgroundPosition="";
    }
  })
</script>
</body>

</html>